import * as THREE from 'three'
import createApp from '../../core'

function createPlaneHelper (dom: HTMLElement) {
  const { camera, scene, gui } = createApp(dom)
  camera.position.set(-80, 120, 100)
  const lookAt = new THREE.Vector3()
  camera.lookAt(lookAt)

  const axesHelper = new THREE.AxesHelper(50)
  scene.add(axesHelper)

  const { x, y, z, distance, size, color } = data
  const plane = new THREE.Plane(new THREE.Vector3(x, y, z), distance)
  let helper = new THREE.PlaneHelper(plane, size, color)
  scene.add(helper)

  function refresh () {
    scene.remove(helper)
    const { x, y, z, distance, size, color } = data
    const plane = new THREE.Plane(new THREE.Vector3(x, y, z), distance)
    helper = new THREE.PlaneHelper(plane, size, color)
    scene.add(helper)
  }

  const folder1 = gui.addFolder('平面法向量')
  folder1.add(data, 'x', -500, 500).onChange(refresh)
  folder1.add(data, 'y', -500, 500).onChange(refresh)
  folder1.add(data, 'z', -500, 500).onChange(refresh)

  const folder2 = gui.addFolder('平面到远点的距离')
  folder2.add(data, 'distance', -500, 500).onChange(refresh)

  const folder3 = gui.addFolder('辅助网格参数')
  folder3.add(data, 'size', 0, 1500).onChange(refresh)
  folder3.addColor(data, 'color').onChange(refresh)
}

const data = {
  x: 0,
  y: 1,
  z: 0,
  distance: 0,
  size: 100,
  color: 0xff0000
}

export {
  createPlaneHelper
}
